const img = document.querySelector('img')
// 1. 监听图片的error事件
img.onerror = (e) => {
    handleError(img, img.getAttribute('retry'))
}


function handleError(El, retry) {
    retry = parseInt(retry)

    // 开启一个定时器,这里每1500ms执行一次
    let timer = setTimeout(() => {
        // 如果重试次数大于3
        if (retry > 3) {
            console.log('连接失败')
            // 图片使用占位图片url
            El.src = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
            // 清除定时器
            clearTimeout(timer)

        } else {
            // 重试次数在规定内
            console.log('重试次数', retry)
            // 计数器+1
            retry += 1
            El.setAttribute('retry', retry)
            El.src = 'https://www.baidu.cmo/img.png'
        }
    }, 1500)

}

let curImg = 'http://www.baidu111.com'
const img = document.querySelector('img')

img.onerror = () => {
    handleError(img, img.getAttribute('retry'))
}

const _handleError = (EL, retry) => {
    retry = parseInt(retry)

    let timer = setTimeout(() => {
        if (timer > 3) {
            El.src = 'https://www.baiud.com'
            clearTimeout(timer)
        } else {
            El.src = curImg
            El.setAttribute('retry', ++retry)
        }
    }, 1500)
}